<template>
    <div>
        <!-- 给患者开药 -->
        <h2>患者姓名:{{ this.$route.query.patient }}</h2>
        <div class="head">
            <div class="my_btn">
                <el-button @click="back" size="mini" type="info" class="el-icon-back">
                    返回
                </el-button>
                <!-- <el-button @click="toItemEdit" size="mini" type="success" class="el-icon-plus">
                    新增
                </el-button> -->
                <el-button @click="toSelectItem" size="mini" type="success" class="el-icon-plus">
                    从药品库增加
                </el-button>
            </div>
            <div class="search">
                <el-input v-model="searchContent" placeholder="查找...请输入药品名称"  class="input-with-select">
                    <el-button @click="mySearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <template>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
            style="width: 100%" @selection-change="handleSelectionChange">

                <el-table-column prop="img" label="药品图片" width="40" align="center">
                    <template slot-scope="scope">
                        <!-- <img src="../../../public/images/notfoundImg.png" alt="" width="30"
                            height="30"> -->
                        <img v-if="scope.row.img==''" src="../../../public/images/notfoundImg.png" alt="" width="30"
                            height="30">
                        <img v-if="scope.row.img!=''" :src="$host + scope.row.img" alt="" width="30"
                            height="30">
                    </template>
                </el-table-column>
                
                <el-table-column prop="name" label="药品名称" width="80">
                </el-table-column>
                <el-table-column prop="drugId" label="药品编号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="model" label="型号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="price" label="单价" width="80">
                </el-table-column>
                <el-table-column prop="num" label="数量" width="80">
                </el-table-column>
                <el-table-column prop="unitName" label="单位" width="120">
                </el-table-column>
                <el-table-column prop="totalAmount" label="金额" width="auto">
                </el-table-column>
                <el-table-column prop="remarks" label="备注" width="auto">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag disable-transitions type="success" v-if="scope.row.status == 0">
                            有效
                        </el-tag>
                        <el-tag disable-transitions type="info" v-if="scope.row.status == 1">
                            无效
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" class="el-icon-edit"
                            @click="toItemEdit(scope.row)">
                            修改
                        </el-button>
                        <el-button type="danger" size="mini" class="el-icon-close"
                            @click="deleteMed(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        <!-- 分页器 -->
            <Pagination @getPagination="getPagination" :total="total" :pageSize="pageSize"></Pagination>
        </template>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'

    export default {
        name:'Item',
        components: {
            Pagination,
        },
        data() {
            return {
                searchContent:'',
                pageSize:5,
                total:0,
                listTotal: [],
                diagnosisId:this.$route.query.id,
                tableData:[
                    {
                        "name": "消食片",//药品名称
                        "drugId": 1,//药品编号
                        "model": null,//型号
                        "price": 20,//单价
                        "num": 23,//数量
                        "unitName": "盒",//单位
                        "totalAmount": 460,//金额
                        "remarks": "没有",//备注
                        "createTime": "2023-02-20",//创建时间
                        "status":'',//状态0有效1无效
                        "img": '',
                    }, 
                ],
                multipleSelection: [],
            }
        },
        created(){
            this.$axios({
                method:'get',
                url:'/diagnosis/diagnosisManagement/findDiagnosisDrugById',
                params:{
                    "diagnosisId":this.$route.query.id,
                    "currentPage":1,//当前页数默认第一页
                    "pageSize":5,//每页显示记录数
                }
            })
            .then(resp=>{
                this.total=parseInt(resp.data.data.total);
                this.tableData=resp.data.data.list
            })
        },
        methods: {
            //进入修改页面
            toItemEdit(row) {
                this.$router.push({path:'/Diagnosis/ItemEdit',query:{tableData:row,id:this.$route.query.id}})
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            back(){
                this.$router.push('diaManage')
            },
            toSelectItem(){
                this.$router.push({path:'/Diagnosis/SelectItem',query:{id:this.$route.query.id}})
            },
            getPagination(page) {
                this.$axios({
                    method:'get',
                    url:'/diagnosis/diagnosisManagement/findDiagnosisDrugById',
                    params:{
                        "diagnosisId":this.$route.query.id,
                        "currentPage":page,//当前页数默认第一页
                        "pageSize":5,//每页显示记录数
                    }
                })
                .then(resp=>{
                    this.tableData=resp.data.data.list
                })

            },
            //列表单选多选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            mySearch(){
                if(this.searchContent==''){//如果值为空显示所有
                    this.$axios({
                        method:'get',
                        url:'/diagnosis/diagnosisManagement/findDiagnosisDrugById',
                        params:{
                            "diagnosisId":this.$route.query.id,
                            "currentPage":1,//当前页数默认第一页
                            "pageSize":5,//每页显示记录数
                        }
                    })
                    .then(resp=>{
                        console.log('显示全部',resp.data.data.list);
                        this.total=parseInt(resp.data.data.total);
                        this.tableData=resp.data.data.list
                    })
                }else{
                    this.$axios({//根据条件分页查询诊断药品信息
                        method:'post',
                        url:`/diagnosis/diagnosisManagement/findDiagDrugByCondition?condition=${this.searchContent}&currentPage=1&diagnosisId=${this.$route.query.id}&pageSize=5`,
                        data:{
                            "diagnosisId":this.$route.query.id,
                            "condition":this.searchContent,
                            "currentPage":1,//当前页数默认第一页
                            "pageSize":5,//每页显示记录数
                        }
                    })
                    .then(resp=>{
                        this.total=parseInt(resp.data.data.total);
                        this.tableData=resp.data.data.list
                    })
                }
                
            },
            //删除药品
            deleteMed(row) {
                this.$confirm('此操作将删除该种药品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 执行删除
                    this.$axios({
                        method:'post',
                        url:`/diagnosis/diagnosisManagement/delDiagnosisDrug?id=${row.id}`,
                        data:{
                            id:row.id,
                        }
                    })
                    .then(resp=>{
                        this.$axios({//删除成功后重新渲染页面
                            method:'get',
                            url:'/diagnosis/diagnosisManagement/findDiagnosisDrugById',
                            params:{
                                "diagnosisId":this.$route.query.id,
                                "currentPage":1,//当前页数默认第一页
                                "pageSize":5,//每页显示记录数
                            }
                        })
                        .then(resp=>{
                            this.total=parseInt(resp.data.data.total);
                            this.tableData=resp.data.data.list;
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
           
        },
    }
</script>

<style lang="less" scoped>
    h2{
        text-align: left;
        margin: 10px;
    }
    .head{
        margin: 5px;
        padding: 10px;
        height: 40px;
        border-top: 5px solid gainsboro;
        border-radius: 5px;
        background-color: white;
    }
    .my_btn{
        float: left;
    }
    .search{
        float: right;
        
    }
    .my_search{
        padding: 5px;
    }
</style>